<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>perfect-scrollbar测试</title>
		<link rel="stylesheet" type="text/css" href="../../js/lib/perfect-scrollbar-v0.8.1/css/perfect-scrollbar.css" />
		<script src="../../js/lib/perfect-scrollbar-v0.8.1/js/perfect-scrollbar.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				position: relative;
				border: 1px solid deepskyblue;
			}
			
			.content {
				display: inline-block;
				margin-right: 10px;
				position: absolute;
				width: 200px;
				height: 200px;
				z-index: 1;
			}
			
			.more {
				width: inherit;
				height: 10px;
				opacity: 0.5;
				background: lightcoral;
				position: absolute;
				z-index: 2;
			}
			
			.more-down {
				bottom: 0;
				left: 0;
			}
			
			.more-up {
				top: 0;
				left: 0;
			}
		</style>
	</head>

	<body>
		<header>
			<p>添加接触到底部就自动滚动的效果</p>
			<p>实现效果：鼠标按下选中文本，向上或者向下移动到边界的时候，进行滚动加载，离开则停止加载</p>
			<p>这是0.81版本，用法参考https://github.com/utatti/perfect-scrollbar/tree/0.8.1</p>
			<hr />
		</header>
		<div class="box box1">
			<div class="more more-up"></div>
			<div class="content">
				有些人喜欢炫耀自己写了多少多少万行的代码，仿佛代码的数量是衡量编程水平的标准。然而，如果你总是匆匆写出代码，却从来不回头去推敲，修改和提炼，其实是不可能提高编程水平的。你会制造出越来越多平庸甚至糟糕的代码。在这种意义上，很多人所谓的“工作经验”，跟他代码的质量其实不一定成正比。如果有几十年的工作经验，却从来不回头去提炼和反思自己的代码，那么他也许还不如一个只有一两年经验，却喜欢反复推敲，仔细领悟的人 有些人喜欢炫耀自己写了多少多少万行的代码，仿佛代码的数量是衡量编程水平的标准。然而，如果你总是匆匆写出代码，却从来不回头去推敲，修改和提炼，其实是不可能提高编程水平的。你会制造出越来越多平庸甚至糟糕的代码。在这种意义上，很多人所谓的“工作经验”，跟他代码的质量其实不一定成正比。如果有几十年的工作经验，却从来不回头去提炼和反思自己的代码，那么他也许还不如一个只有一两年经验，却喜欢反复推敲，仔细领悟的人 有些人喜欢炫耀自己写了多少多少万行的代码，仿佛代码的数量是衡量编程水平的标准。然而，如果你总是匆匆写出代码，却从来不回头去推敲，修改和提炼，其实是不可能提高编程水平的。你会制造出越来越多平庸甚至糟糕的代码。在这种意义上，很多人所谓的“工作经验”，跟他代码的质量其实不一定成正比。如果有几十年的工作经验，却从来不回头去提炼和反思自己的代码，那么他也许还不如一个只有一两年经验，却喜欢反复推敲，仔细领悟的人
			</div>
			<div class="more more-down"></div>
		</div>
		<button id="scroll">回到顶部</button>
		<script type="text/javascript">
			var container = document.querySelector('.content');
			var box1 = document.querySelector('.box1');
			var more = document.querySelectorAll('.more');
			Ps.initialize(container);
			document.getElementById("scroll").onclick = function() {
				container.scrollTop = 0;
			}
			//iskeydown true 
			var moreStatus = {
				isKeydown: false,
				isOver: false,
				timer: null
			}

			var callbackMove = function(event) {
				var isMore = event.target.className.indexOf('more') > -1;
				if(!isMore) {
					return;
				}
				clearInterval(moreStatus.timer);
				moreStatus.timer = setInterval(function() {
					var speed = 0;
					var isUp = event.target.className.indexOf('more-up') > -1;
					var isDown = event.target.className.indexOf('more-down') > -1;
					if(isUp && moreStatus.isKeydown&&moreStatus.isOver) {
						speed = -16;
						if(container.scrollTop === 0) {
							speed = 0;
							clearInterval(moreStatus.timer);
						}
					} else if(isDown && moreStatus.isKeydown&&moreStatus.isOver) {
						speed = 16;
						if(container.scrollTop === (container.scrollHeight - container.offsetHeight)) {
							speed = 0;
							clearInterval(moreStatus.timer);
						}
					}
					container.scrollTop += speed;
				}, 100);
			}
			box1.addEventListener("mouseenter", function() {
				moreStatus.isOver=true;
			});
			box1.addEventListener("mouseleave", function() {
				moreStatus.isOver=false;
				clearInterval(moreStatus.timer);
				more.forEach(function(v, i, list) {
					v.removeEventListener("mousemove", callbackMove);
				});

			});
			box1.addEventListener("mousedown", function() {
				moreStatus.isKeydown = true;
				more.forEach(function(v, i, list) {
					v.addEventListener("mousemove", callbackMove);
				});

			});
			box1.addEventListener("mouseup", function() {
				moreStatus.isKeydown = false;
				clearInterval(moreStatus.timer);
				more.forEach(function(v, i, list) {
					v.removeEventListener("mousemove", callbackMove);
				});

			});
			more.forEach(function(v, i, list) {
				v.addEventListener("mouseenter", function() {
					if(!moreStatus.isKeydown) {
						return;
					}
					clearInterval(moreStatus.timer);
					more.forEach(function(v, i, list) {
						v.addEventListener("mousemove", callbackMove);
					});
				});
				v.addEventListener("mouseleave", function() {
					if(!moreStatus.isKeydown) {
						return;
					}
					clearInterval(moreStatus.timer);
					more.forEach(function(v, i, list) {
						v.removeEventListener("mousemove", callbackMove);
					});
				});
			});
		</script>
	</body>

</html>